<!DOCTYPE html>
	<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
	<link rel="icon" type="image/png" href="../assets/img/favicon.png">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>
	文章编辑
	</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
	<!--     Fonts and icons     -->
	<link href="../assets/css/fonts.css" rel="stylesheet" />
	<link rel="stylesheet" href="../assets/css/new_file.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
	<!-- CSS Files -->
	<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
	<link href="../assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" />
	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link href="../assets/demo/demo.css" rel="stylesheet" />
	<script src="../assets/js/axios-min.js"></script>
	<script src="../assets/js/vue.js"></script>
	<script src="../assets/js/vue-axios.js"></script>
	</head>
	<body class="login-page sidebar-collapse">
		<!-- Navbar -->
		<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400">
			<div class="container">
      <div class="navbar-translate">
      	<span></span>
        <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-bar top-bar"></span>
          <span class="navbar-toggler-bar middle-bar"></span>
          <span class="navbar-toggler-bar bottom-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="../assets/img/blurred-image-1.jpg">
        <ul class="navbar-nav">
          
		  <li class="nav-item">
		    <a class="nav-link" href="main.html" style="font-size: 18px;">个人主页</a>
		  </li>
		  <li class="nav-item">
		    <a class="nav-link" href="search.html" style="font-size: 18px;">文章搜索</a>
		  </li>
		  <li class="nav-item">
		    <a class="nav-link" href="login.html" style="font-size: 18px;">退出登录</a>
		  </li>
        </ul>
      </div>
			</div>
		</nav>
		<!-- End Navbar -->
		<div class="wrapper">
     <div class="page-header clear-filter page-header-small" filter-color="orange">
      <div class="page-header-image" data-parallax="true" style="background-image:url(../assets/img/bg1.jpg);">
      </div>
      <h1 style="margin-top: 180px; margin-left: 8%; background-color: #ec720e; width: 230px;">作品修改</h1>
    </div>
    <div class="section" style="padding: 20px 0;">
      <div class="container">
      <form role="form" style="text-align: center;" action="../WriterServlet" id="passage">
        <div class="form-group">
          <label for="name" style="text-align:center; font-size: 1.05rem;">{{passage.title}}</label>
          <input type="text" v-model="title" id="title" class="form-control"  style="border-radius: 2px;" >
        </div>
         <div class="form-group">
            <label for="name" style="text-align:center; font-size: 1.05rem;">{{passage.body}}</label>
            <textarea v-model="body" class="form-control"  rows="30" style="max-height:30.5rem; border: 1px solid #E3E3E3; "></textarea>
          </div>        
       <a class="btn" @click="submit()" >提交</a>
      </form>

    </div>
    
  </div>		
		<!--   Core JS Files   -->
		<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
		<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
		<!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
		<script src="../assets/js/plugins/bootstrap-switch.js"></script>
		<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
		<script src="../assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
		<!--  Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
		<script src="../assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
		<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
		
		<script>
			new Vue({
				el: '#passage',
				data() {
					return {												
						title:'',
						body:'',
						code:'',
						passage:'',
					}
				},
				mounted() {
					
					axios.get('/test/UpdateServlet',{
				        params: {						        					
							passage:this.passage,
				        }
				      })
				      .then((response) => {
				        console.log(response.data);//请求的返回体	
				        this.passage = response.data.passage;	
				      })
				      .catch((error) => {
				        console.log(error);//异常
				 });																						
				},
				methods: {
					submit() {
						axios.get('/test/UpdateServlet',{
						        params: {						        					
									title:this.title,
									body:this.body,
									code:this.code,
						        }
						      })
						      .then((response) => {
						        console.log(response.data);//请求的返回体	
						        this.code = response.data.code;
						      })
						      .catch((error) => {
						        console.log(error);//异常
						 });
						if(this.code == 1)
						 alert("修改成功！！！");
						
					},
					
				}

			})
		
		</script>
	</body>
</html>